<!-- 1 定义组件模版 --> 
<template>
    <div>
        css  详情
         <div>id:{{ query.id }}</div>
         <div>title:{{ query.title }}</div>
         <div>content:{{ query.content}}</div>
 
 
    </div>
 </template> 
 
 <!-- 2 定义组件逻辑 -->
 <script setup lang="ts" name="CssDetail"> 
 import { ref ,toRef,toRefs,onMounted,onUnmounted} from 'vue'			
  import {useRoute} from 'vue-router'
 
 //获取当前的路由
  let route  = useRoute();
    //id=asdfsadf002&title=内置函数&content=内置了calc，xxx等函数
    //让query对象是响应式
  let query = toRef(route,'query')
//  console.log("query参数")
//   onMounted(()=>{
//      console.log("CSS Detail 组件 挂载");
     
//   })
//   onUnmounted(()=>{
//      console.log("CSS Detail 组件卸载");
//   })
 </script> 
  
 <!-- 3 定义样式 -->
 <style scoped> 
  div{
     margin: 5px;
  }
 </style>